<template>

	<div class="page">
		<p-page-header title="部门人员管理"></p-page-header>
		<el-tree :data="listUser"
			default-expand-all>
			
			<template v-slot="{data,node}">
				<div class="container" v-if="node.level == 1">
					<span >
						{{data.name}}
					</span>
					<el-button @click.stop="handleAddUser(data)" class="btn" icon="el-icon-plus" type="success" size="mini">
						新增
					</el-button>
					
					
				</div>
				<div class="container" v-else>
					<span >
						账号:{{data.username}},昵称:{{data.nickname}}
						
					</span>
					<el-button class="btn" 
						icon="el-icon-remove" 
						type="danger" 
						size="mini"
						@click.stop="handleRemove(data)">
						移除
					</el-button>
				</div>
				
			</template>
		</el-tree>
		<el-dialog 
			title="部门分配"
			width="700px"
			:visible.sync="visible">
				<el-transfer
					v-model="checkedUser"
			    :props="{
			      key: 'id',
			      label: 'nickname'
			    }"
			    :data="list"
					filterable
					filter-placeholder="请输入搜索内容"
					:titles="['未分配','已分配']"
				>
					<template v-slot="{option}">
						<div>
							{{option.index}}.{{option.nickname}}
							<el-tag size="small">
								{{option.deptName}}
							</el-tag>
						</div>
						
					</template>
			  </el-transfer>
			<div style="text-align: right;">
				<el-button type="primary" size="mini" @click="handleSub">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// 引入vuex的state和actions的映射对象用来映射store中定义的state和actions
	import { mapState,mapActions } from 'vuex'
	export default{
		// 定义了组件的名称，用来结合keep-alive缓存页面
		name:'dept-user',
		data(){
			return {
				// 调用查询接口需要的参数
				queryForm:{
					pno:1,
					psize:10
				},
				dateArr:[],
				checkedUser:[],//用户id的数组
				checkedDeptId:'',//部门id
				visible:false,
				// 查询按钮的加载动画开关
				queryLoading:false
			}
		},
		computed:{
			// 将vuex中定义的deptModel模块的数据加载到本页的计算属性中，这样我们在本页就可以
			// 直接通过this.list和this.page访问到vuex中的数据，这里的数据只能读取不能写入
			...mapState('deptModel',['listUser']),
			...mapState('userModel',['list','page']),
			// 格式化日期的计算属性
			formatTime(){
				return function(time){
					let d = new Date(Number(time));
					return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
				}
			}
		},
		// 当第一次打开页面时会执行created生命周期
		async created(){
			await this.getListForUser(this.queryForm)
		},
		// 由于本页通过keep-alive进行了缓存，缓存后原有的生命周期不执行，所以通过activated来识别何时进入本页
		async activated(){
			await this.getListForUser(this.queryForm)
		},
		methods:{
			...mapActions('deptModel',['getListForUser','addDeptUser','deleteUserById']),
			...mapActions('userModel',['getListAll']),
			async handleAddUser(data){
				console.log(data)
				this.queryForm.pno = 1
				this.checkedUser = []
				if(data.children){
					this.checkedUser = data.children.map(item => {
						return item.id
					})
					console.log(this.checkedUser)
				}
				this.checkedDeptId = data.id
				await this.getListAll(this.queryForm)
				this.visible = true;
			},
			// 删除数据调用的方法
			async handleRemove(data){
				// 通过同步化写法调用$confirm方法
				let confirm =await  this.$confirm('正在从该部门中移除员工','提示',{
					type:'warning'
				}).catch(err => err)
				if(confirm == 'confirm'){
					// // 如果点击确定
					// //首先调用删除业务
					await this.deleteUserById(data.id)
					await this.getListForUser()
					// //删除业务调用完毕之后我们重新调用一次查询业务，来实现数据的更新
					// await this.getListForPage(this.queryForm)
				}
			},
			async handleSub(){
				if(this.checkedUser.length == 0){
					this.$notify.error({
						title:'提示',
						message:'请选择一个用户'
					})
					return
				}
				await  this.addDeptUser({
					ids:this.checkedUser,
					id:this.checkedDeptId
				})
				this.visible = false
				await this.getListForUser()
				
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	::v-deep .el-tree-node__content{
		height: auto !important;
	}
	.container{
		width: 100%;
		display: flex;
		padding: 5px 0px;
		justify-content: space-between;
		align-items: center;
	}
	
</style>
